<template>
    <u-modal @confirm="onConfirm" @cancel="onVisibleChange(false)" :show="showModal" @close="onVisibleChange(false)" :showCancelButton="true"  title="选择锭组" >
        <view class="slot-content" style="width: 100%;">
            <view class="spin-group-container">
                <view
                    v-for="(item, index) in ruleForm.spinGroupList"
                    :key="index"
                    style="width: calc(100% / 3);padding: 2rpx;box-sizing: border-box;"
                >
                    <view>
                        <u-tag
                            size="large"
                            @click="onChecked(item)"
                            :plain="!checkData.some(x => x.id === item.id)"
                            :text="item.groupIndex"
                        ></u-tag>
                    </view>
                </view>
            </view>
        </view>

    </u-modal>
</template>
<script>
    import {machinemanagerMachineGet, workforcemanagementScheduleEmpMachineUpdate} from "../../../../api";
    import {tipBar} from "../../../../utils/jk-utils";

    export default {
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            modalState: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                checkData: [],
                ruleForm: {},
                showModal: false
            };
        },
        methods: {
            onChecked(item) {
                if (this.checkData.some(x => x.id === item.id)) {
                    this.checkData.forEach((x, index) => {
                        if (x.id === item.id) {
                            this.checkData.splice(index, 1);
                        }
                    })
                } else {
                    this.checkData.push(item);
                }
            },
            onConfirm() {
                workforcemanagementScheduleEmpMachineUpdate({
                    id: this.formData.id,
                    machineId: this.formData.machineId,
                    machineCode: this.formData.machineCode,
                    machineName: this.formData.machineName,
                    spinGroupList: this.checkData,
                }).then(res => {
                    if (res.data.status === 200) {
                        tipBar('save');
                        this.$emit('confirm');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            },
            getMachineDetailRequest() {
                if (!this.formData.machineId) return;
                return machinemanagerMachineGet({
                    id: this.formData.machineId
                }).then(res => {
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                    }
                });
            }
        },
        watch: {
            modalState(newVal) {
                this.showModal = newVal;
                if (newVal) {
                    this.checkData = JSON.parse(JSON.stringify(this.formData)).spinGroupList || [];
                    this.getMachineDetailRequest();
                }
                if (!newVal) {
                    this.checkData = [];
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .spin-group-container {
        max-height: 600rpx;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
    }
</style>
